<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>hls手机直播</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }

      html,
      body {
        width: 100%;
        height: 100%;
      }

      #container {
        width: 100vw;
        height: 56.25vw;
      }

      #main {
        font-size: 1.2rem;
        background: #0170fe;
        color: #fff;
        text-align: center;
        padding: 0.5rem;
      }

      #player {
        width: 100%;
        display: none;
      }
    </style>
  </head>
  <body>
    <div>
      <div id="main">请求直播地址</div>
    </div>

    <video
      id="player"
      preload="auto"
      webkit-playsinline
      playsinline
      x-webkit-airplay
      x5-playsinline
      autoplay
      controls
    ></video>

    <script src="./env.js"></script>
    <script src="./axios.min.js"></script>
    <script>

      async function main() {
        const token = await getToken();
        const device = await checkDevice(token);
        if (device.is_online !== "Y") {
          alert("当前设备不在线");
          return;
        }
        await requestStartLive(token);
        const address = await getStreamingAddress(token);
        // 此处有两种
        // hls为http专用
        // shls为https专用
        const $video = document.getElementById("player");
        $video.src = address.hls;
        $video.style.display = "block";

        document.getElementById("main").style.display = "none";
      }

      function createFormData(values) {
        // 只2层遍历
        const formData = new FormData();
        Object.keys(values).forEach(key => {
          const dt = values[key];
          if (Array.isArray(dt)) {
            dt.forEach(item => {
              formData.append(`${key}[]`, item);
            });
          } else {
            formData.append(key, dt);
          }
        });
        return formData;
      }

      document.getElementById("main").addEventListener("click", () => {
        main();
      });

      function getToken() {
        return axios({
          url: "https://api.morecanai.com/client/v1/obtain-access-token",
          method: "post",
          data: createFormData({
            client_id: CLIENT_ID,
            client_secret: CLIENT_SECRET
          })
        }).then(function(response) {
          const token = response.data.access_token;
          return token;
        });
      }

      function requestStartLive(token) {
        axios({
          url: `https://api.morecanai.com/client/v1/camera/${DEVICE}/camera-message`,
          method: "post",
          data: createFormData({
            action: "start_streaming"
          }),
          headers: {
            "Content-Type": "multipart/form-data",
            Authorization: "Bearer " + token
          }
        }).then(function(response) {
          // console.log(response);
        });
      }

      function getStreamingAddress(token) {
        return axios({
          url: `https://api.morecanai.com/client/v1/camera/streaming-address`,
          method: "post",
          data: createFormData({
            camer_serial_numbers: DEVICE
          }),
          headers: {
            Authorization: "Bearer " + token
          }
        }).then(function(response) {
          return response.data[DEVICE];
        });
      }

      function checkDevice(token) {
        return axios({
          url: `https://api.morecanai.com/client/v1/camera/${DEVICE}/show`,
          method: "get",
          headers: {
            Authorization: "Bearer " + token
          }
        }).then(function(response) {
          return response.data;
        });
      }
    </script>
  </body>
</html>
